<template>
	<div>
		<div v-for="(item,index) in dataList" :key="index" style="background: #fff;border-radius: 16px;margin-bottom: 10px;" class="point"
			@click="gotoDet(item)">
			<div style="display: flex;align-items: center;padding: 10px;">
				<span>{{item.outletName}}</span>
				<span style="margin-left: 10px;">{{item.outletNo}}</span>
				<span>（{{item.latestTime}}）</span>

				<img v-if="item.onlineStatus == 'ONLINE'" src="@/assets/sIcon30.png"
					style="width: 20px;height: 20px;margin-left: 10px;" />
				<img v-else-if="item.onlineStatus == 'OFFLINE'" src="@/assets/sIcon32.png"
					style="width: 20px;height: 20px;margin-left: 10px;" />
			</div>

			<div style="font-size: 12px;color: #999;padding:0 10px 10px;">污染物</div>

			<div style="padding-bottom: 10px;">
				<div v-for="(item1,index1) in item.pollutionList"
					style="background: #ecf4fe;border-radius: 16px;;padding: 20px;margin: 0 10px;width: calc(25% - 60px);display: inline-block;margin-bottom: 10px;">
					<div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px">
						<img src="@/assets/sIcon33.png" style="width: 30px;height: 20px;margin-right: 10px;" />
						<span>{{item1.pollutionName}}</span>
					</div>

					<div style="text-align: center;margin-bottom: 20px">
						<span
							style="font-size: 22px;color: #4994f1;margin-right: 10px;font-weight: bold;">{{item1.actualAmount}}</span>
						<span>{{item1.unitValue}}</span>
					</div>

					<div style="display: flex;justify-content: space-between;">
						<div style="position: relative;display: flex;align-items: center;">
							<img src="@/assets/sIcon34.png" style="width: 2px;height: 30px;" />
							<div style="margin-left: 10px;font-size: 12px;">
								<div>标杆</div>
								<div>
									<span
										style="font-size: 22px;margin-right: 10px;font-weight: bold;">{{item1.bgAmount || 0}}</span>
									<span style="color: #999;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>

						<div style="position: relative;display: flex;align-items: center;">
							<img src="@/assets/sIcon34.png" style="width: 2px;height: 30px;" />
							<div style="margin-left: 10px;font-size: 12px;">
								<div>折算</div>
								<div>
									<span
										style="font-size: 22px;margin-right: 10px;font-weight: bold;">{{item1.zsAmount || 0}}</span>
									<span style="color: #999;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<el-empty v-if="dataList.length == 0"></el-empty>
	</div>
</template>

<script>
	let that
	export default {
		data() {
			return {
				dataList: []

			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.getGasOnlineLatestMonitorList()
		},

		methods: {
			gotoDet(item) {
				that.$router.push("/wasteGas/onlineSurveyDet?ticketId=" + that.$store.state.token + "&outletId=" + item
					.outletId)
			},

			getGasOnlineLatestMonitorList: function(value) {
				that.ajax({
					url: '/gasOutlet/getGasOnlineLatestMonitorList',
					dataType: 'json',
					data: JSON.stringify({

					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList = result.data
					}
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
